<template>
  <div style="padding: 20px 0 32px 32px;background-color: white;">
    <a-form layout="inline">
      <a-row :gutter="24">
        <a-col :md="10" :sm="10">
          <a-form-item label="设备">
            <a-select
              v-has="'sensor:All_Sensor_Attribute'"
              style="width:200px;"
              placeholder="请选择设备"
              @change="handleEquipmentChange"
            >
              <a-select-opt-group label="空气质量监测系统">
                <a-select-option key="Air_Sensor_Attribute-WHU_Sensor_G_0001" value="Air_Sensor_Attribute-WHU_Sensor_G_0001">空气质量监测系统_0001</a-select-option>
                <a-select-option key="Air_Sensor_Attribute-WHU_sensor_G_002" value="Air_Sensor_Attribute-WHU_sensor_G_002">空气质量监测系统_002</a-select-option>
              </a-select-opt-group>
              <a-select-opt-group label="水质监测预警系统">
                <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_0001" value="Water_Sensor_Attribute-WHU_sensor_W_0001">水质监测预警系统_0001</a-select-option>
                <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_002" value="Water_Sensor_Attribute-WHU_sensor_W_002">水质监测预警系统_002</a-select-option>
              </a-select-opt-group>
              <a-select-opt-group label="土壤墒情检测系统">
                <a-select-option key="Soil_Sensor_Attribute-WHU_Sensor_G_0001" value="Soil_Sensor_Attribute-WHU_Sensor_G_0001">土壤墒情检测系统_0001</a-select-option>
                <a-select-option key="Soil_Sensor_Attribute-WHU_sensor_G_002" value="Soil_Sensor_Attribute-WHU_sensor_G_002">土壤墒情检测系统_002</a-select-option>
              </a-select-opt-group>
              <a-select-opt-group label="气象环境监测系统">
                <a-select-option key="Gas_Sensor_Attribute-WHU_Sensor_G_0001" value="Gas_Sensor_Attribute-WHU_Sensor_G_0001">气象环境监测系统_0001</a-select-option>
                <a-select-option key="Gas_Sensor_Attribute-WHU_sensor_G_002" value="Gas_Sensor_Attribute-WHU_sensor_G_002">气象环境监测系统_002</a-select-option>
              </a-select-opt-group>
            </a-select>
            <a-select
              v-has="'sensor:Air_Sensor_Attribute'"
              style="width:200px;"
              placeholder="请选择设备"
              @change="handleEquipmentChange"
            >
              <a-select-opt-group label="空气质量监测系统">
                <a-select-option key="Air_Sensor_Attribute-WHU_Sensor_G_0001" value="Air_Sensor_Attribute-WHU_Sensor_G_0001">空气质量监测系统_0001</a-select-option>
                <a-select-option key="Air_Sensor_Attribute-WHU_sensor_G_002" value="Air_Sensor_Attribute-WHU_sensor_G_002">空气质量监测系统_002</a-select-option>
              </a-select-opt-group>
            </a-select>
            <a-select
              v-has="'sensor:Water_Sensor_Attribute'"
              style="width:200px;"
              placeholder="请选择设备"
              @change="handleEquipmentChange"
            >
              <a-select-opt-group label="水质监测预警系统">
                <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_0001" value="Water_Sensor_Attribute-WHU_sensor_W_0001">水质监测预警系统_0001</a-select-option>
                <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_002" value="Water_Sensor_Attribute-WHU_sensor_W_002">水质监测预警系统_002</a-select-option>
              </a-select-opt-group>
            </a-select>
            <a-select
              v-has="'sensor:Soil_Sensor_Attribute'"
              style="width:200px;"
              placeholder="请选择设备"
              @change="handleEquipmentChange"
            >
              <a-select-opt-group label="土壤墒情检测系统">
                <a-select-option key="Soil_Sensor_Attribute-WHU_Sensor_G_0001" value="Soil_Sensor_Attribute-WHU_Sensor_G_0001">土壤墒情检测系统_0001</a-select-option>
                <a-select-option key="Soil_Sensor_Attribute-WHU_sensor_G_002" value="Soil_Sensor_Attribute-WHU_sensor_G_002">土壤墒情检测系统_002</a-select-option>
              </a-select-opt-group>
            </a-select>
            <a-select
              v-has="'sensor:Gas_Sensor_Attribute'"
              style="width:200px;"
              placeholder="请选择设备"
              @change="handleEquipmentChange"
            >
              <a-select-opt-group label="气象环境监测系统">
                <a-select-option key="Gas_Sensor_Attribute-WHU_Sensor_G_0001" value="Gas_Sensor_Attribute-WHU_Sensor_G_0001">气象环境监测系统_0001</a-select-option>
                <a-select-option key="Gas_Sensor_Attribute-WHU_sensor_G_002" value="Gas_Sensor_Attribute-WHU_sensor_G_002">气象环境监测系统_002</a-select-option>
              </a-select-opt-group>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :md="10" :sm="10">
          <a-form-item label="周期">
            <a-select
              style="width:150px;"
              @change="handlePeriodChange"
              :value="periodType"
            >
              <a-select-option value="1">三十分钟</a-select-option>
              <a-select-option value="2">一小时</a-select-option>
              <a-select-option value="3">四小时</a-select-option>
              <a-select-option value="4">一天</a-select-option>
              <a-select-option value="5">一周</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :md="4" :sm="4">
          <a-button type="primary" :loading="dataLoading" :disabled="btnDsiabled" @click="searchQuery">查询</a-button>
        </a-col>
      </a-row>
    </a-form>
    <br/>
    <v-echart v-show="showChartAir" :style="{width:chartWidth,height:'600px'}" :options="polarAir"/>
    <v-echart v-show="showChartWater" :style="{width:chartWidth,height:'600px'}" :options="polarWater"/>
    <v-echart v-show="showChartSoil" :style="{width:chartWidth,height:'600px'}" :options="polarSoil"/>
    <v-echart v-show="showChartGas" :style="{width:chartWidth,height:'600px'}" :options="polarGas"/>
  </div>
</template>

<script>
import {getAction} from '@/api/manage';
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue

// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/title.js'


export default {
  name: 'CharAnalysis',
  components: {
    'v-echart': ECharts
  },
  data() {
    return {
      url:{
        chartAnalysis:"/sensorapi/chartAnalysis",
      },
      equipmentName:"",
      periodType:"1",
      showChartAir:false,
      showChartWater:false,
      showChartSoil:false,
      showChartGas:false,
      btnDsiabled:false,
      dataLoading:false,
      timer:'',
      polarAir: {
        title: {
          text: '曲线分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            startValue: 0,
            endValue: 180
          }
        ],
        legend: {
          data:[],
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          selected:{},
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitNumber: 1,
        },
        series: [
        ]
      },
      polarWater: {
        title: {
          text: '曲线分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            startValue: 0,
            endValue: 180
          }
        ],
        legend: {
          data:[],
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          selected:{},
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitNumber: 1,
        },
        series: [
        ]
      },
      polarSoil: {
        title: {
          text: '曲线分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            startValue: 0,
            endValue: 180
          }
        ],
        legend: {
          data:[],
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          selected:{},
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitNumber: 1,
        },
        series: [
        ]
      },
      polarGas: {
        title: {
          text: '曲线分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            startValue: 0,
            endValue: 180
          }
        ],
        legend: {
          data:[],
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          selected:{},
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitNumber: 1,
        },
        series: [
        ]
      }
    };
  },
  computed:{
    chartWidth() {
      return (document.documentElement.offsetWidth-350) +  'px';
    }
  },
  created() {

  },
  methods:{
    initData() {
      this.btnDsiabled = true;
      this.dataLoading = true;
      this.paramMap = {
        deviceName:this.equipmentName,
        periodType:this.periodType,
        pageNo:"1",
        pageSize:"400",
      };
      getAction(this.url.chartAnalysis, this.paramMap).then((res) => {
        if(res.code == 0) {
          if(res.result == null) {
            this.$notification['info']({
              message: '系统提示',
              description: '没有查询到相关曲线分析数据！',
            });
          } else {
            let deviceName = this.equipmentName.split("-")[0];
            if(deviceName == "Air_Sensor_Attribute") {
              this.polarAir.series = res.result;
            } else if(deviceName == "Water_Sensor_Attribute") {
              this.polarWater.series = res.result;
            } else if(deviceName == "Soil_Sensor_Attribute") {
              this.polarSoil.series = res.result;
            } else if(deviceName == "Gas_Sensor_Attribute") {
              this.polarGas.series = res.result;
            }
          }
        } else if(res.code == 500) {
          this.$notification['error']({
            message: '系统提示',
            description: '阿里云物联网API服务异常，请稍后重试！',
          });
        }
        this.btnDsiabled = false;
        this.dataLoading = false;
      });
    },
    handleEquipmentChange(value) {
      this.equipmentName = value;
      clearInterval(this.timer);// 条件改变， 删除定时器
      this.showChartAir = false;
      this.showChartWater = false;
      this.showChartGas = false;
      this.showChartSoil = false;
      let deviceName = value.split("-")[0];
      if(deviceName == "Air_Sensor_Attribute") {
        this.showChartAir = true;
        this.polarAir.legend.data = ['SO2浓度','CO浓度','PM2.5浓度'];
        this.polarAir.legend.selected = {'SO2浓度':true,'CO浓度':true,'PM2.5浓度':true};
      } else if(deviceName == "Water_Sensor_Attribute"){
        this.showChartWater = true;
        this.polarWater.legend.data = ['PH酸碱度','水体浊度'];
        this.polarWater.legend.selected = {'PH酸碱度':true,'水体浊度':true};
      } else if(deviceName == "Soil_Sensor_Attribute"){
        this.showChartSoil = true;
        this.polarSoil.legend.data = ['土壤1含水量','土壤2含水量','土壤3含水量','土壤4含水量','土壤1温度','土壤2温度','土壤3温度','土壤4温度','土壤1电导率','土壤2电导率','土壤3电导率','土壤4电导率','土壤1盐度','土壤2盐度','土壤3盐度','土壤4盐度','土壤1EPS','土壤2EPS','土壤3EPS','土壤4EPS','土壤1TDS','土壤2TDS','土壤3TDS','土壤4TDS'];
        this.polarSoil.legend.selected = {'土壤1含水量':true,'土壤2含水量':true,'土壤3含水量':true,'土壤4含水量':true, '土壤1温度':false,'土壤2温度':false,'土壤3温度':false,'土壤4温度':false,'土壤1电导率':false,'土壤2电导率':false,'土壤3电导率':false,'土壤4电导率':false,'土壤1盐度':false,'土壤2盐度':false,'土壤3盐度':false,'土壤4盐度':false,'土壤1EPS':false,'土壤2EPS':false,'土壤3EPS':false,'土壤4EPS':false,'土壤1TDS':false,'土壤2TDS':false,'土壤3TDS':false,'土壤4TDS':false};
      } else if(deviceName == "Gas_Sensor_Attribute"){
        this.showChartGas = true;
        this.polarGas.legend.data = ['风速','风向','空气温度','相对湿度'];
        this.polarGas.legend.selected = {'风速':true,'风向':true,'空气温度':true,'相对湿度':true};
      }
    },
    handlePeriodChange(value) {
      this.periodType = value;
      clearInterval(this.timer);// 条件改变， 删除定时器
    },
    searchQuery() {
      clearInterval(this.timer);
      this.initData();
      this.timer = setInterval(this.initData, 1000*30);
    }
  }
}
</script>

<style scoped>

</style>